import React, { Component } from "react";
import "./style.css";

// import { createPortal } from "react-dom";

// class Modal extends Component {
//   state = {};
//   render() {
//     return createPortal(<div>模态框组件</div>, document.querySelector("body"));
//   }
// }

import withPortal from "./withPortal";
import { bool, string, func, oneOfType, number } from "prop-types";

class Modal extends Component {
  static defaultProps = {
    cancelText: "取消",
    okText: "确定",
    width: "520",
  };

  static propTypes = {
    open: bool.isRequired,
    title: string.isRequired,
    onOk: func.isRequired,
    onCancel: func.isRequired,
    width: oneOfType([string, number]),
    cancelText: string,
    okText: string,
  };

  render() {
    // console.log(this.props.open);
    return (
      this.props.open && (
        <div className="shadow">
          <div
            className="center"
            style={{
              width: this.props.width,
            }}
          >
            <h3>{this.props.title}</h3>
            <div>{this.props.children}</div>
            <footer>
              <button onClick={this.props.onCancel}>
                {this.props.cancelText}
              </button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </footer>
          </div>
        </div>
      )
    );
  }
}

export default withPortal(Modal);
